{% extends 'template/jhTemplateV4.html' %} {% block vueTemplate %}

<script id="app-template" type="text/html">
	<div>
		<v-app mobile-breakpoint="sm">
			<jh-menu />
			<v-main class="mt-15">
				<!-- 头部内容 >>>>>>>>>>>>> -->
				<div class="jh-page-second-bar px-8">
					<v-row>
						<v-col cols="12" xs="12" sm="12" md="4" xl="3">
							<div class="pt-3 text-h7 font-weight-bold">
								车辆保险管理
								<!-- 帮助页按钮 -->
								<v-icon @click="isHelpPageDrawerShown = true" color="success" small
									>mdi-help-circle-outline
								</v-icon>
							</div>
							<v-breadcrumbs class="pb-3 pt-0 pl-0" :items="breadcrumbs" divider="-"></v-breadcrumbs>
						</v-col>
					</v-row>
				</div>
				<!-- <<<<<<<<<<<<< 头部内容 -->
				<div class="jh-page-body-container px-8">
					<!-- 页面内容 >>>>>>>>>>>>> -->
					<v-card class="rounded-lg">
						<v-row class="ma-0 pa-4">
							<!-- 新增按钮 -->
							<v-btn color="success" class="elevation-0 mr-2" @click="doUiAction('startCreateItem')" small
								>新增
							</v-btn>
							<v-btn color="success" class="elevation-0 mr-2" @click="doUiAction('createPaymentRequest', {})" small
								>批量付款申请
							</v-btn>
							<v-spacer></v-spacer>
							<!-- 搜索过滤 -->
							<v-col cols="12" xs="8" sm="4" md="3" xl="2" class="pa-0">
								<v-text-field
									color="success"
									v-model="searchInput"
									prefix="搜索："
									class="jh-v-input"
									dense
									filled
									single-line></v-text-field>
							</v-col>
						</v-row>
						<!-- 表格 -->
						<v-data-table
							:headers="headers"
							:items="tableData"
							:search="searchInput"
							:footer-props="{ itemsPerPageOptions: [20, 50, -1], itemsPerPageText: '每页', itemsPerPageAllText: '所有'}"
							:items-per-page="20"
							mobile-breakpoint="0"
							:loading="isTableLoading"
							checkbox-color="success"
							:class="{'zebraLine': isTableZebraLineShown }"
							fixed-header
							class="jh-fixed-table-height elevation-0 mt-0 mb-xs-4"
							show-select item-key="insuranceId" @item-selected="tableItemSelected" v-model="tableSelected" @toggle-select-all="tableToggleSelectAll">
							<!-- 表格操作按钮 -->
							<template v-slot:item.action="{ item }">
					
								<span
									role="button"
									class="success--text font-weight-medium font-size-2 mr-2"
									@click="doUiAction('startUpdateItem', item)">
									<v-icon size="16" class="success--text">mdi-note-edit-outline</v-icon>修改
								</span>
								<span
									role="button"
									class="success--text font-weight-medium font-size-2 mr-2"
									@click="doUiAction('deleteItem', item)">
									<v-icon size="16" class="success--text">mdi-trash-can-outline</v-icon>删除
								</span>
								<v-menu offset-y>
									<template v-slot:activator="{ on, attrs }">
										<span
											role="button"
											class="success--text font-weight-medium font-size-2 mr-1"
											v-bind="attrs"
											v-on="on">
											操作<v-icon size="14" class="success--text">mdi-chevron-down</v-icon>
										</span>
									</template>
									<v-list dense>
										<v-list-item
											v-for="tableButton of tableButtonList"
											@click="doUiAction(tableButton.action, {item, button: tableButton})">
											<v-list-item-title> {{ tableButton.text }}</v-list-item-title>
										</v-list-item>
									</v-list>
								</v-menu>
								<!-- <span role="button" class="success--text font-weight-medium font-size-2 mr-2" @click="doUiAction('startFlowRequest', item)" v-if="item.status!=='已付'">
	                                                 <v-icon size="16" class="success--text">mdi-shield-car</v-icon>付款申请
	                                               </span>
	                                               <span role="button" class="success--text font-weight-medium font-size-2" @click="doUiAction('confirmPayment', item)" v-if="item.status!=='已付'">
	                                                 <v-icon size="16" class="success--text">mdi-shield-car</v-icon>完成
	                                               </span> -->
							</template>
							<template v-slot:item.operationAt="{ item }">{{item.operationAt | dateFormat }}</template>
							<!-- 没有数据 -->
							<template v-slot:loading>
								<div class="jh-no-data">数据加载中</div>
							</template>
							<template v-slot:no-data>
								<div class="jh-no-data">暂无数据</div>
							</template>
							<template v-slot:no-results>
								<div class="jh-no-data">暂无数据</div>
							</template>
							<template v-slot:item.trafficRemindDaysText="{ item }">
								<span
									:class="{'green--text' :item.trafficRemindDays > 3 , 'red--text': item.trafficRemindDays <= 3}"
									>{{ item.trafficRemindDaysText }}</span
								>
							</template>
							<template v-slot:item.commercialRemindDaysText="{ item }">
								<span
									:class="{'green--text' :item.commercialRemindDays > 3 , 'red--text': item.commercialRemindDays <= 3}"
									>{{ item.commercialRemindDaysText }}</span
								>
							</template>
							<template v-slot:item.payment="{item}">
								<template v-for="(ticketItem, ticketIndex) in item.insurancePaymentTicket">
									<div :key="ticketIndex">
										<span @click="doUiAction('updatePaymentRequest', ticketItem)" role="button" class="success--text font-weight-medium font-size-2 pr-2">申请_{{ticketItem.ticketRequestAt | mdFormat}}</span>
										<span v-if="ticketItem.ticketStatus !== '申请'" @click="doUiAction('viewPaymentRequest', ticketItem)" role="button" class="success--text font-weight-medium font-size-2">付款{{ticketItem.ticketStatus}}_{{ticketItem.ticketStatusAt | mdFormat}}</span>
									</div>
								</template>
							</template>

							<!-- 表格分页 -->
							<template v-slot:footer.page-text="pagination">
								<span>{{ pagination.pageStart }}-{{ pagination.pageStop }}</span>
								<span class="ml-1">共{{ pagination.itemsLength }}条</span>
							</template>
						</v-data-table>
					</v-card>

					<!-- 保险付款申请抽屉 -->
					<drawer-createTicket ref="createFlowTicket" :ticketType="'flow'"></drawer-createTicket>

					<!-- 新增抽屉 -->
					<v-navigation-drawer
						v-if="isCreateDrawerShown"
						v-model="isCreateDrawerShown"
						:permanent="isCreateDrawerShown"
						fixed
						temporary
						right
						width="80%"
						class="elevation-24">
						<v-form ref="createForm" lazy-validation>
							<!-- 抽屉标题 -->
							<v-row>
								<span class="text-subtitle-1 font-weight-medium pa-6 pl-7">新增信息</span>
							</v-row>
							<!-- 抽屉表单 -->
							<!-- <v-text-field class="jh-v-input" dense single-line filled v-model="createItem.xxxId" :rules="validationRules.requireRules"></v-text-field> -->
							<v-row class="mt-0 px-4">
								<car-number-select @success="doInsertInCreateItem"></car-number-select>
								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>商业险编号</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										:rules="validationRules.requireRules"
										v-model="createItem.commercialInsuranceId"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>交强险编号</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										:rules="validationRules.requireRules"
										v-model="createItem.trafficInsuranceId"></v-text-field>
								</v-col>
								<v-col cols="12" sm="12" md="4">
	                                  <span class="jh-input-label">
	                                      <span class="red--text">*</span>
										  商业险终止日期
									  </span>
	                                    <v-menu class="jh-v-input" transition="scale-transition" offset-y="offset-y" min-width="auto">
	                                      <template v-slot:activator="{on, attrs}">
	                                      	<v-text-field v-bind="attrs" v-on="on" v-model="createItem.commercialEndDate" class="jh-v-input" dense="dense" single-line="single-line" filled="filled" readonly="readonly" label="点击此处选择日期" :rules="validationRules.requireRules"></v-text-field>
	                                      </template>
	                                      <v-date-picker color="success" elevation="20" v-model="createItem.commercialEndDate"></v-date-picker>
	                                    </v-menu>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>交强险终止日期</span>
										<v-menu class="jh-v-input" transition="scale-transition" offset-y="offset-y" min-width="auto">
											<template v-slot:activator="{on, attrs}">
												<v-text-field v-bind="attrs" v-on="on" v-model="createItem.trafficEndDate" class="jh-v-input" dense="dense" single-line="single-line" filled="filled" readonly="readonly" label="点击此处选择日期" :rules="validationRules.requireRules"></v-text-field>
											</template>
											<v-date-picker color="success" elevation="20" v-model="createItem.trafficEndDate"></v-date-picker>
										  </v-menu>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>商业险保费</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										type="number"
										:rules="validationRules.requireRules"
										@input="calculateSumPremium('createItem')"
										v-model="createItem.commercialAmount"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>交强险保费</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										:rules="validationRules.requireRules"
										@input="calculateSumPremium('createItem')"
										v-model="createItem.trafficAmount"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">合计保费</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="createItem.insuranceTotalAmount"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">备注</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="createItem.remark"></v-text-field>
								</v-col>
							</v-row>

							<!-- 抽屉操作按钮 -->
							<v-row class="justify-end mx-0 mt-8 px-6">
								<v-btn color="success" @click="doUiAction('createItem')" small>保存</v-btn>
								<v-btn class="elevation-0 ml-2" @click="isCreateDrawerShown = false" small>取消</v-btn>
							</v-row>
						</v-form>
						<!-- 抽屉关闭按钮 -->
						<v-btn
							elevation="0"
							color="success"
							fab
							absolute
							top
							left
							small
							tile
							class="drawer-close-float-btn"
							@click="isCreateDrawerShown = false">
							<v-icon>mdi-close</v-icon>
						</v-btn>
					</v-navigation-drawer>
					<!-- 编辑抽屉 -->
					<v-navigation-drawer
						v-if="isUpdateDrawerShown"
						v-model="isUpdateDrawerShown"
						:permanent="isUpdateDrawerShown"
						fixed
						temporary
						right
						width="80%"
						class="elevation-24">
						<v-form ref="updateForm" lazy-validation>
							<!-- 抽屉标题 -->
							<v-row>
								<span class="text-subtitle-1 font-weight-medium pa-6 pl-7">修改信息</span>
							</v-row>
							<!-- 抽屉表单 -->
							<v-row class="mt-0 px-4">
								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>商业险编号</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										:rules="validationRules.requireRules"
										v-model="updateItem.commercialInsuranceId"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>交强险编号</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										:rules="validationRules.requireRules"
										v-model="updateItem.trafficInsuranceId"></v-text-field>
								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>商业险终止日期</span>
									<v-menu class="jh-v-input" transition="scale-transition" offset-y="offset-y" min-width="auto">
										<template v-slot:activator="{on, attrs}">
											<v-text-field v-bind="attrs" v-on="on" v-model="createItem.commercialEndDate" class="jh-v-input" dense="dense" single-line="single-line" filled="filled" readonly="readonly" label="点击此处选择日期" :rules="validationRules.requireRules"></v-text-field>
										</template>
										<v-date-picker color="success" elevation="20" v-model="createItem.commercialEndDate"></v-date-picker>
									  </v-menu>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>交强险终止日期</span>
									<v-menu class="jh-v-input" transition="scale-transition" offset-y="offset-y" min-width="auto">
										<template v-slot:activator="{on, attrs}">
											<v-text-field v-bind="attrs" v-on="on" v-model="createItem.trafficEndDate" class="jh-v-input" dense="dense" single-line="single-line" filled="filled" readonly="readonly" label="点击此处选择日期" :rules="validationRules.requireRules"></v-text-field>
										</template>
										<v-date-picker color="success" elevation="20" v-model="createItem.trafficEndDate"></v-date-picker>
									  </v-menu>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>商业险保费</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										type="number"
										:rules="validationRules.requireRules"
										@input="calculateSumPremium('updateItem')"
										v-model="updateItem.commercialAmount"></v-text-field>
								</v-col>

								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label"><span class="red--text">*</span>交强险保费</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										type="number"
										@input="calculateSumPremium('updateItem')"
										:rules="validationRules.requireRules"
										v-model="updateItem.trafficAmount"></v-text-field>
								</v-col>
								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">合计保费</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										type="number"
										v-model="updateItem.insurancTotalAmount"></v-text-field>
								</v-col>
								<v-col cols="12" sm="12" md="4">
									<span class="jh-input-label">备注</span>
									<v-text-field
										class="jh-v-input"
										dense
										single-line
										filled
										v-model="updateItem.remark"></v-text-field>
								</v-col>
							</v-row>
							<!-- 抽屉操作按钮 -->
							<v-row class="justify-end mx-0 mt-8 px-6">
								<v-btn color="success" @click="doUiAction('updateItem')" small>保存</v-btn>
								<v-btn class="elevation-0 ml-2" @click="isUpdateDrawerShown = false" small>取消</v-btn>
							</v-row>
						</v-form>
						<!-- 抽屉关闭按钮 -->
						<v-btn
							elevation="0"
							color="success"
							fab
							absolute
							top
							left
							small
							tile
							class="drawer-close-float-btn"
							@click="isUpdateDrawerShown = false">
							<v-icon>mdi-close</v-icon>
						</v-btn>
					</v-navigation-drawer>
					<!-- <<<<<<<<<<<<< 页面内容 -->

					<paymentRequest-create ref="createInsurancePaymentRequest" @success="doUiAction('getTableData')" />
					<paymentRequest-update ref="updateInsurancePaymentRequest" @success="doUiAction('getTableData')" />
					<paymentRequest-handle ref="handleInsurancePaymentRequest" @success="doUiAction('getTableData')" />
				</div>

				<!-- 帮助页抽屉 >>>>>>>>>>>>> -->
				<v-navigation-drawer
					v-if="isHelpPageDrawerLoaded"
					v-model="isHelpPageDrawerShown"
					:permanent="isHelpPageDrawerShown"
					fixed
					temporary
					right
					width="80%"
					class="elevation-24">
					<iframe style="border: 0" :src="`/${appInfo.appId}/pageDoc#404.md`" width="100%" height="100%"></iframe>
					<v-btn
						elevation="0"
						color="success"
						fab
						absolute
						top
						left
						small
						tile
						class="drawer-close-float-btn"
						@click="isHelpPageDrawerShown = false">
						<v-icon>mdi-close</v-icon>
					</v-btn>
				</v-navigation-drawer>
				<!-- <<<<<<<<<<<<< 帮助页抽屉 -->
			</v-main>
		</v-app>

		<jh-toast />
		<jh-mask />
		<jh-confirm-dialog />
	</div>
</script>

<div id="app"></div>

{% endblock %} {% block vueScript %}

{% include 'filter/vueFilters.html' %}
{% include 'common/jianghuJs/fixedTableHeightV4.html'
%}
{% include 'component/drawer/drawer-createTicket.html' %}
{% include 'component/common/carNumberSelect.html' %}
{% include 'common/constantUtil.html' %}

{% include 'component/ticket/paymentRequest-create.html' %}
{% include 'component/ticket/paymentRequest-update.html' %}
{% include 'component/ticket/paymentRequest-handle.html' %}

<script type="module">
	new Vue({
		el: "#app",
		template: "#app-template",
		vuetify: new Vuetify(),
		data: () => ({
			// 保险付款申请
			isRequestDrawerShown: false,
			requestActionData: {
				ticketType: "付款申请",
			},
			// 面包屑
			breadcrumbs: [
				{
					text: "首页",
					disabled: true,
				},
				{
					text: "车辆保险管理",
					disabled: true,
				},
			],
			isHelpPageDrawerShown: false,
			isHelpPageDrawerLoaded: false,
			isMobile: window.innerWidth < 500,
			// 表格相关数据
			isTableZebraLineShown: true,
			validationRules: {
				requireRules: [v => !!v || "必填"],
			},
			// 下拉选项
			constantObj: {
				gender: [
					{
						value: null,
						text: "全部",
					},
					{
						value: "male",
						text: "男",
					},
					{
						value: "female",
						text: "女",
					},
				],
			},
			serverSearchInput: {
				gender: null,
			},
			searchInput: null,
			isTableLoading: true,
			tableData: [],
			headers: [
				{
					text: "操作",
					value: "action",
					align: "center",
					sortable: false,
					width: 300,
					class: "fixed",
					cellClass: "fixed",
				},
				{
					text: "保险id",
					value: "insuranceId",
					width: 120,
				},
				{
					text: "汽车编号",
					value: "carId",
					width: 120,
				},
				{
					text: "车牌号",
					value: "carNumber",
					width: 120,
				},
				{
					text: "厂型号",
					value: "carModel",
					width: 120,
				},
				{
					text: "付款申请和操作",
					value: "payment",
					width: 250,
				},
				{
					text: "商业险编号",
					value: "commercialInsuranceId",
					width: 120,
				},
				{
					text: "商业险终止日期",
					value: "commercialEndDate",
					width: 120,
				},
				{
					text: "商业险剩余天数",
					value: "commercialRemindDaysText",
					width: 120,
				},
				{
					text: "交强险编号",
					value: "trafficInsuranceId",
					width: 120,
				},
				{
					text: "交强险终止日期",
					value: "trafficEndDate",
					width: 120,
				},
				{
					text: "交强险剩余天数",
					value: "trafficRemindDaysText",
					width: 120,
				},
				{
					text: "车架号",
					value: "VIN",
					width: 120,
				},
				{
					text: "发动机号",
					value: "engineNo",
					width: 120,
				},
				{
					text: "上牌日期",
					value: "registerDate",
					width: 120,
				},
				{
					text: "商业险保费",
					value: "commercialAmount",
					width: 120,
				},
				{
					text: "交强险保费",
					value: "trafficAmount",
					width: 120,
				},
				{
					text: "合计保费",
					value: "insuranceTotalAmount",
					width: 120,
				},
				{
					text: "是否已付",
					value: "status",
					width: 120,
				},
				{
					text: "备注",
					value: "remark",
					width: 120,
				},
				{
					text: "操作者",
					value: "operationByUser",
					width: 120,
				},
				{
					text: "操作时间",
					value: "operationAt",
					width: 250,
				},
			],
			// 列表的操作按钮菜单
			tableButtonList: [
				{
					text: "付款申请",
					buttonType: "pay",
					path: "",
					action: "createPaymentRequest",
				},
				{
					text: "完成",
					buttonType: "finish",
					path: "",
					action: "confirmPayment",
				},
			],
			isCreateDrawerShown: false,
			createItem: {
				sumPremium: 0,
				insuranceTotalAmount: 0,
				trafficAmount: 0
			},
			createActionData: {},
			isUpdateDrawerShown: false,
			updateItem: {
				sumPremium: 0,
				insuranceTotalAmount: 0,
				trafficAmount: 0
			},
			updateItemId: null,
			updateActionData: {},
			deleteItem: {},
			deleteItemId: null,

			// 批量
      tableSelected: [],
		}),
		watch: {
			isHelpPageDrawerShown(val) {
				if (val && !this.isHelpPageDrawerLoaded) {
					this.isHelpPageDrawerLoaded = true;
				}
			},
		},
		async created() { },
		mounted() {
			this.doUiAction("getTableData");
		},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "confirmPayment":
						await this.confirmUpdateItemDialog();
						await this.confirmPayment(uiActionData);
						await this.getTableData();
						break;
					case "createPaymentRequest":
						await this.createPaymentRequest(uiActionData);
						break;
					case "updatePaymentRequest":
						await this.updatePaymentRequest(uiActionData);
						break;
					case "viewPaymentRequest":
						await this.viewPaymentRequest(uiActionData);
						break;
					case "flowRequest":
						await this.confirmCreateItemDialog();
						await this.doFlowRequest();
						break;
					case "getTableData":
						await this.getTableData();
						break;
					case "startCreateItem":
						await this.prepareCreateFormData();
						await this.openCreateDrawer();
						break;
					case "createItem":
						await this.prepareCreateValidate();
						await this.confirmCreateItemDialog();
						await this.prepareDoCreateItem();
						await this.doCreateItem();
						await this.closeCreateDrawer();
						await this.getTableData();
						break;
					case "startUpdateItem":
						await this.prepareUpdateFormData(uiActionData);
						await this.openUpdateDrawer();
						break;
					case "updateItem":
						await this.prepareUpdateValidate();
						await this.confirmUpdateItemDialog();
						await this.prepareDoUpdateItem();
						await this.doUpdateItem();
						await this.closeUpdateDrawer();
						await this.getTableData();
						break;
					case "deleteItem":
						await this.prepareDeleteFormData(uiActionData);
						await this.confirmDeleteItemDialog();
						await this.prepareDoDeleteItem();
						await this.doDeleteItem();
						await this.clearDeleteItem();
						await this.getTableData();
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},
			doInsertInCreateItem(carItem) {
				this.createItem.carId = carItem.carId;
				this.createItem.carNumber = carItem.carNumber;
			},
			// 计算保险终止日期与当日的差
			computedTrafficDays(item) {
				if (item.trafficEndDate) {
					const remindMilliseconds = dayjs(item.trafficEndDate) - dayjs();
					const trafficRemindDays = Math.ceil(remindMilliseconds / (3600 * 1000 * 24));
					// if (!trafficRemindDays && !isNaN(trafficRemindDays)) {
					// remindDaysText.trafficRemindDaysText = `${trafficRemindDays}天`
					// }
					return isNaN(trafficRemindDays) ? 0 : trafficRemindDays;
				}
				return null;
			},

			computedCommercialDays(item) {
				if (item.commercialEndDate) {
					const remindMilliseconds = dayjs(item.commercialEndDate) - dayjs();
					const commercialRemindDays = Math.ceil(remindMilliseconds / (3600 * 1000 * 24));
					// if (!commercialRemindDays && !isNaN(commercialRemindDays)) {
					// remindDaysText.commercialRemindDaysText = `${trafficRemindDays}天`
					// }
					return isNaN(commercialRemindDays) ? 0 : commercialRemindDays;
				}
				return null;
			},
			async confirmPayment(uiActionData) {
				// 修改保险记录的状态
				await window.jhMask.show();
				await window.vtoast.loading("确认支付中");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "insuranceManagement",
							actionId: "updateItem",
							actionData: {
								status: "已付",
							},
							where: {
								carId: uiActionData.carId,
							},
						},
					},
				});
				await window.jhMask.hide();
				await window.vtoast.success("确认支付成功");
			},
			// 开始申请流水
			async doFlowRequest() {
				await window.jhMask.show();
				await window.vtoast.loading("流水申请中");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "ticketManagement",
							actionId: "insertItem",
							actionData: this.requestActionData,
							idGenerate: {
								type: "idSequence",
								prefix: "GD",
								bizId: "ticketId",
								tableName: "ticket",
							},
						},
					},
				});
				// 关闭抽屉
				this.isRequestDrawerShown = false;
				await window.jhMask.hide();
				await window.vtoast.success("流水申请成功");
			},
			async prepareRequestFormData(uiActionData) {
				// 保险付款不需要合同
				// const { carId } = uiActionData
			},

			async openRequestDrawer() {
				await this.$refs.createFlowTicket.doUiAction("open", this.requestActionData);
			},
			/**
			 * 获取表格数据
			 */
			async getTableData() {
				this.isTableLoading = true;
				const backendSearchData = _.pickBy(this.serverSearchInput, (fieldValue, fieldKey) => {
					if (fieldValue !== null && fieldValue !== "") {
						return true;
					}
				});
				const rows = (
					await window.jianghuAxios({
						data: {
							appData: {
								pageId: "insuranceManagement",
								actionId: "selectItemList",
								actionData: {},
								where: backendSearchData,
								orderBy: [
									{
										column: "operationAt",
										order: "desc",
									},
								],
							},
						},
					})
				).data.appData.resultData.rows;
				this.tableData = rows.map(row => {
					row.trafficRemindDays = this.computedTrafficDays(row);
					row.commercialRemindDays = this.computedCommercialDays(row);
					row.trafficRemindDaysText = row.trafficRemindDays ? `${row.trafficRemindDays}天` : "";
					row.commercialRemindDaysText = row.commercialRemindDays ? `${row.commercialRemindDays}天` : "";
					return row;
				});
				this.isTableLoading = false;
			},
			// ---------- 新增数据 uiAction >>>>>>>>>> --------
			async prepareCreateFormData() {
				this.createItem = {};
			},

			async openCreateDrawer() {
				this.isCreateDrawerShown = true;
			},

			async prepareCreateValidate() {
				if (await this.$refs.createForm.validate()) {
					return true;
				}
				throw new Error("请完善表单信息");
			},

			async confirmCreateItemDialog() {
				if ((await window.confirmDialog({ title: "新增", content: "确定新增吗？" })) === false) {
					throw new Error("[confirmCreateFormDialog] 否");
				}
			},

			prepareDoCreateItem() {
				const { id, ...data } = this.createItem;
				this.createActionData = {
					...data,
					insuranceCreateAt: new Date()
				};
			},

			async doCreateItem() {
				await window.jhMask.show();
				await window.vtoast.loading("新增数据");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "insuranceManagement",
							actionId: "insertItem",
							actionData: this.createActionData,
							idGenerate: {
								type: "idSequence",
								prefix: "BX",
								bizId: "insuranceId",
								tableName: "insurance",
							},
						},
					},
				});
				await window.jhMask.hide();
				await window.vtoast.success("新增数据成功");
			},
			async closeCreateDrawer() {
				this.isCreateDrawerShown = false;
				this.createItem = {};
				this.createActionData = null;
			},
			// ---------- <<<<<<<<<<< 新增数据 uiAction ---------
			// ---------- 修改数据 uiAction >>>>>>>>>>>> --------
			async prepareUpdateFormData(funObj) {
				this.updateItem = _.cloneDeep(funObj);
			},

			async openUpdateDrawer() {
				this.isUpdateDrawerShown = true;
			},

			async prepareUpdateValidate() {
				if (await this.$refs.updateForm.validate()) {
					return true;
				}
				throw new Error("请完善表单信息");
			},

			async confirmUpdateItemDialog() {
				if ((await window.confirmDialog({ title: "修改", content: "确定修改吗？" })) === false) {
					throw new Error("[confirmUpdateItemDialog] 否");
				}
			},

			async prepareDoUpdateItem() {
				const { id, ...data } = this.updateItem;
				this.updateItemId = id;
				this.updateActionData = data;
			},

			async doUpdateItem() {
				await window.jhMask.show();
				await window.vtoast.loading("修改数据");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "insuranceManagement",
							actionId: "updateItem",
							actionData: this.updateActionData,
							where: {
								id: this.updateItemId,
							},
						},
					},
				});

				await window.jhMask.hide();
				await window.vtoast.success("修改数据成功");
			},

			async closeUpdateDrawer() {
				this.isUpdateDrawerShown = false;
				this.updateItem = {};
				this.updateActionData = null;
				this.updateItemId = null;
			},
			// ---------- <<<<<<<<<<< 修改数据 uiAction ---------
			// ---------- 删除数据 uiAction >>>>>>>>>>>> --------
			async prepareDeleteFormData(funObj) {
				this.deleteItem = _.cloneDeep(funObj);
			},
			async confirmDeleteItemDialog() {
				if ((await window.confirmDialog({ title: "删除", content: "确定删除吗？" })) === false) {
					throw new Error("[confirmDeleteItemDialog] 否");
				}
			},
			async prepareDoDeleteItem() {
				const { id } = this.deleteItem;
				this.deleteItemId = id;
			},
			async doDeleteItem() {
				await window.vtoast.loading("删除数据");
				await window.jianghuAxios({
					data: {
						appData: {
							pageId: "insuranceManagement",
							actionId: "deleteItem",
							actionData: {},
							where: {
								id: this.deleteItemId,
							},
						},
					},
				});
				await window.vtoast.success("删除数据成功");
			},
			async clearDeleteItem() {
				this.deleteItem = {};
				this.deleteItemId = null;
			},
			// ---------- <<<<<<<<<<< 删除数据 uiAction ---------
			// 计算总保费
			calculateSumPremium(key) {
				let commercialAmount = isNaN(Number(this[key].commercialAmount)) ? 0 : Number(this[key].commercialAmount)
				let trafficAmount = isNaN(Number(this[key].trafficAmount)) ? 0 : Number(this[key].trafficAmount)
				this[key].insuranceTotalAmount = commercialAmount + trafficAmount
			},

			// ---------- 付款申请 uiAction >>>>>>>>>>>>> ----------
			async createPaymentRequest({ item }) {
				const orderList = item ? [item] : this.tableSelected;

				if (orderList.length === 0) {
					window.vtoast.fail(`请选择保险订单`);
					throw new Error("请选择保险订单");
				}

				const hasApplyTicket = orderList.some(item => item.insurancePaymentTicket.some(ticket => ['申请', '处理中'].includes(ticket.ticketStatus)));
				if (hasApplyTicket) {
					window.vtoast.fail(`还有未完成的申请单`);
					throw new Error("还有未完成的申请单");
				}


				this.isTableLoading = true;
				const orderIds = _.map(orderList, 'insuranceId');
				await this.$refs.createInsurancePaymentRequest.doUiAction('startCreateItem', {
					orderIds,
					ticketType: '保险付款'
				});
				this.isTableLoading = false;
			},
			async updatePaymentRequest(item) {
				await this.$refs.updateInsurancePaymentRequest.doUiAction('startUpdateItem', {
					...item,
					actionType: '编辑'
				});
			},
			async viewPaymentRequest(item) {
				await this.$refs.handleInsurancePaymentRequest.doUiAction('startUpdateItem', {
					ticketIds: [item.ticketId],
					actionType: '查看'
				});
			},
			// ---------- <<<<<<<<<<<<< 付款申请 uiAction ----------

			// ---------- table selected >>>>>>>>>>>> --------
			tableItemSelected({ item, value }) {
				if (value) {
					this.tableSelected.push(item);
				} else {
					this.tableSelected = _.reject(this.tableSelected, ['insuranceId', item.insuranceId]);
				}
			},
			tableToggleSelectAll({ items, value }) {
				if (value) {
					this.tableSelected = items;
				} else {
					this.tableSelected = [];
				}
			},
			// ---------- <<<<<<<<<<< table selected  --------
		},
	});
</script>

<style scoped=""></style>
{% endblock %}